'use strict';

var React = require('react');
var Router = require('react-router'); 
var CheckBox = require('../../ui/checkbox.jsx');
var RadioBox = require('../../ui/radio.jsx');

var RadioBox = require('../../ui/radio.jsx');
var RadioGroupBox = require('../../ui/radioGroup.jsx');



var CenterService = React.createClass({
   getInitialState : function(){
    return {
      isEdit : false,
      volunteerS : {
        isling: false,
        iswu : false,
        isshi : false
      }
    };
  },
  handleSubmit : function(){
    this.setState({ isEdit : false });
  },
  handleCaler : function(){
    this.setState({ isEdit : false });
  },
  handleEdit : function(){
    this.setState({ isEdit : true });
  },
  radioChange : function(value){
    switch(value){
      case '0':
        this.setState({ volunteerS : { isling : true , iswu : false, isshi : false } });
        break;
      case '5':
        this.setState({ volunteerS : { isling : false , iswu : true, isshi : false } });
        break;
      case '10':
        this.setState({ volunteerS : { isling : false , iswu : false, isshi : true } });
        break;
    };
  },
  render: function() {
    var self = this;
    var stateBox;
    var scopeBox;
    var volunteerBox;
    var chargeBox;
    var editButton;


    if(this.state.isEdit){
        stateBox = [];
        scopeBox = <div>
                        <CheckBox  value="线上咨询" />
                        <CheckBox  value="电话咨询" />
                   </div>;
        volunteerBox = <div>
                            <RadioGroupBox>
                                  <RadioBox value="A" text="0人" />
                                  <RadioBox value="B" text="5人" />
                                  <RadioBox value="C" text="10人" />
                            </RadioGroupBox>
                            自定义
                            <input type="text" className="do-page-cneter-service-input" />
                            人
                            <span className="do-ml-lg">每日可提供免费计次服务的上线</span>
                        </div>;
        chargeBox = <div>
                      <div className="do-form-group">
                          <label className="do-control-label" htmlFor="form-name">计次服务人数 </label>
                          <div className="do-form-input">
                               <RadioGroupBox>
                                  <RadioBox value="A" text="0人" />
                                  <RadioBox value="B" text="5人" />
                                  <RadioBox value="C" text="10人" />
                              </RadioGroupBox>
                              自定义
                              <input type="text" className="do-page-cneter-service-input" />
                              人
                              <div className="do-page-cneter-service-detail">每日可提供计次服务额人数上线,不含购买服务包月的人</div>
                          </div>
                      </div>
                      <div className="do-form-group">
                          <label className="do-control-label" htmlFor="form-name">计次服务费用 </label>
                          <div className="do-form-input">
                            <div><span className="do-mr-lg">线上咨询</span>              
                              <div className="do-form-input">
                                 <RadioGroupBox>
                                      <RadioBox value="A" text="5元"  defaultRadio />
                                      <RadioBox value="B" text="10元" />
                                      <RadioBox value="C" text="15元" />
                                </RadioGroupBox>
                                自定义
                                <input type="text" className="do-page-cneter-service-input" />
                                元
                              </div>
                            </div>
                            <p></p>
                            <div><span className="do-mr-lg">线下咨询</span>
                              <div className="do-form-input">
                                  <RadioGroupBox>
                                      <RadioBox value="A" text="5元/分钟" />
                                      <RadioBox value="B" text="10元/分钟" />
                                </RadioGroupBox>
                                  自定义
                                  <input type="text" className="do-page-cneter-service-input" />
                                  元/15分钟
                              </div>
                            </div>
                          </div>
                      </div>
                      
                      <div className="do-lines">
                          <div className="do-line"></div>
                          <div className="do-line"></div>
                          <div className="do-line"></div>
                          <div className="do-line"></div>    
                      </div>

                      <div className="do-form-group">
                          <label className="do-control-label" htmlFor="form-name">包月服务人数 </label>
                          <div className="do-form-input">
                               <RadioGroupBox>
                                      <RadioBox value="A" text="0人" />
                                      <RadioBox value="B" text="5人" />
                                      <RadioBox value="C" text="10人" />
                                </RadioGroupBox>
                              自定义
                              <input type="text" className="do-page-cneter-service-input" />
                              人
                              <div className="do-page-cneter-service-detail">可以提供包月服务额人数上线，关闭包月服务后，已购买服务的用户将不会受影响</div>
                          </div>
                      </div>
                      <div className="do-form-group">
                          <label className="do-control-label" htmlFor="form-name">包月服务费用 </label>
                          <div className="do-form-input">
                                  <RadioGroupBox>
                                      <RadioBox value="A" text="100元" />
                                      <RadioBox value="B" text="150元" />
                                      <RadioBox value="C" text="200元" />
                                </RadioGroupBox>
                                  自定义
                                  <input type="text" className="do-page-cneter-service-input" />
                                  元
                                  <div className="do-page-cneter-service-detail">包月服务不限制用户的咨询次数</div>
                          </div>
                      </div>
                      <div className="do-form-group">
                          <label className="do-control-label" htmlFor="form-name">包月服务时长 </label>
                          <div className="do-form-input">
                            最低 
                            <select className="do-mr-lg">
                              <option>1个月</option>
                              <option >2个月</option>
                              <option >3个月</option>
                            </select>
                            最高
                            <select>
                              <option >1个月</option>
                              <option >2个月</option>
                              <option >3个月</option>
                            </select>
                            <div className="do-page-cneter-service-detail">提供包月服务的时段，最低为一个月,最高为9个月,用户可按照自己意愿进行选择购买</div>
                          </div>
                      </div>
                    </div>;
        editButton =  <div>
                        <a href="javascript:;" className="do-btn do-btn-success do-btn-md" onClick={ this.handleSubmit }>提交</a>
                        <a href="javascript:;" className="do-btn do-btn-default do-btn-md" onClick={ this.handleCaler }>取消</a>
                      </div>;
    }else{
        stateBox = <div className="do-panel-info" >
                        <div className="do-panel-info-head"> 
                            服务状态
                        </div>
                        <div className="do-panel-info-body">
                            <span>审核中</span>
                        </div>
                    </div>;                                                                                                                                                                                                                                                          
        scopeBox = <div>
                        <span>线上咨询</span>
                        <span className="do-ml-md">电话咨询</span>
                   </div>;

        volunteerBox = <span>6人</span>;

        chargeBox = <div>
                      <div className="do-form-group">
                          <label className="do-control-label" htmlFor="form-name">计次服务人数 </label>
                          <div className="do-form-input">
                            10人
                          </div>
                      </div>
                      <div className="do-form-group">
                          <label className="do-control-label" htmlFor="form-name">计次服务费用 </label>
                          <div className="do-form-input">
                            <div>线上咨询          10元</div>
                            <div>线下咨询          20元/5分钟</div>
                          </div>
                      </div>

                      <div className="do-lines">
                          <div className="do-line"></div>
                          <div className="do-line"></div>
                          <div className="do-line"></div>
                          <div className="do-line"></div>    
                      </div>

                      <div className="do-form-group">
                          <label className="do-control-label" htmlFor="form-name">包月服务人数 </label>
                          <div className="do-form-input">
                            10人
                          </div>
                      </div>
                      <div className="do-form-group">
                          <label className="do-control-label" htmlFor="form-name">包月服务费用 </label>
                          <div className="do-form-input">
                            10元
                          </div>
                      </div>
                      <div className="do-form-group">
                          <label className="do-control-label" htmlFor="form-name">包月服务时长 </label>
                          <div className="do-form-input">
                            最高 3个月     最低6个月
                          </div>
                      </div>
                    </div>;

        editButton =  <a href="javascript:;" className="do-btn do-btn-success do-btn-md" onClick={ this.handleEdit }>编辑</a>;
    }


    return (
	/* jshint ignore:start */
		<div className="do-p-lg">

			{ stateBox }

             <div className="do-panel-info" >
                <div className="do-panel-info-head"> 
                    服务范围
                </div>
                <div className="do-panel-info-body">
                    { scopeBox }
                </div>
            </div>

             <div className="do-panel-info" >
                <div className="do-panel-info-head"> 
                    义诊服务
                </div>
                <div className="do-panel-info-body">
                    { volunteerBox }
                </div>
            </div>

             <div className="do-panel-info" >
                <div className="do-panel-info-head"> 
                    收费服务
                </div>
                <div className="do-panel-info-body">
                  { chargeBox }
                </div>
            </div>

            { editButton }
		</div>
	/* jshint ignore:end */
    );
  }
});



module.exports =CenterService;